.page {
  width: 100vw;
  height: 100vh;
  background: #04072f;

  .borderbg {
    position: relative;
  }

  .borderbg::before {
    content: ' ';
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    width: 74px;
    height: 74px;
    border-bottom: 2px solid;
    border-left: 2px solid;
    border-image: linear-gradient(
        307deg,
        rgba(13, 95, 255, 0),
        rgba(59, 124, 255, 1),
        rgba(83, 154, 255, 1),
        rgba(13, 95, 255, 0)
      )
      2 2;
  }

  .borderbg::after {
    content: ' ';
    transform: rotate(90deg);
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: 74px;
    height: 74px;
    border-top: 2px solid;
    border-right: 2px solid;
    border-image: linear-gradient(
        307deg,
        rgba(13, 95, 255, 0),
        rgba(59, 124, 255, 1),
        rgba(83, 154, 255, 1),
        rgba(13, 95, 255, 0)
      )
      2 2;
  }

  .content {
    margin-top: 20px;
    display: flex;
    justify-content: space-around;

    .left {
      width: 625px;
      // margin-left: 12px;

      .lefttop {
        display: flex;
        justify-content: space-between;

        .lefttopl {
          width: 100%;
          display: flex;
          justify-content: space-between;

          .left11 {
            width: 49.5%;

            .jszqk {
              display: flex;
              justify-content: space-around;
              align-items: center;
              flex-wrap: wrap;

              background: url(../../assets/new/bgs.png) no-repeat center center;
              background-size: cover;
              width: 100%;
              height: 155px;

              .block {
                width: 33%;
                height: 40%;
                font-size: 12px;
                font-family: MicrosoftYaHei;
                color: #66ffff;
                display: flex;
                justify-content: center;
                flex-direction: column;
                align-items: center;
                position: relative;

                .div1 {
                  color: #fff;
                  margin-bottom: 5px;
                }

                span {
                  font-size: 14px;
                  font-weight: bold;
                }
              }

              .block::after {
                content: ' ';
                width: 1px;
                height: 24px;
                background-color: #0d9ffe;
                position: absolute;
                right: 0;
                top: 50%;
                margin-top: -12px;
              }

              .blocknot::after {
                content: '';
                width: 0;
                height: 0;
              }

              .block1 {
                width: 25%;
              }
            }
          }
        }
      }

      .left2 {
        margin-top: 15px;
        display: flex;
        justify-content: space-between;

        .left21 {
          width: 49%;
        }
      }

      .left3 {
        margin-top: 15px;
      }
    }

    .cen {
      width: 630px;
      // margin-left: 17px;

      .cen1 {
        width: 100%;
        height: 403px;
        background: url(../../assets/new/chenter.png) no-repeat center center;
        background-size: 100% 100%;
        box-sizing: border-box;
        color: #fff;
        padding: 35px 15px;
        position: relative;

        .line {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-bottom: 20px;

          .lineLeft {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .icon {
              display: block;
              width: 14px;
              height: 16px;
              margin-left: 16px;
              margin-right: 7px;
              overflow: hidden;

              div {
                width: 0px;
                height: 0px;
                border: 24px solid transparent;
                border-left: 24px solid #66ffff;
                position: relative;
                top: -15px;
                left: -10px;
              }
            }

            .bread {
              cursor: pointer;
              font-size: 14px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #00ffff;
            }
          }

          .title {
            font-size: 18px;
            font-family: MicrosoftYaHei;
            color: #ffffff;
            margin-right: 10px;
            cursor: pointer;
          }

          .titlec {
            font-size: 18px;
            font-family: MicrosoftYaHei;
            color: #00ffff;
            margin-right: 10px;
            cursor: pointer;
          }
        }

        .lineRight {
          display: flex;
        }
      }

      .cen2 {
        display: flex;
        margin-top: 19px;
        align-items: center;
        justify-content: space-between;
        width: 100%;

        .cen2l {
          width: 436px;
          overflow: hidden;
        }

        .cen2r {
          width: 436px;
          overflow: hidden;
        }
      }
    }

    .right {
      width: 625px;

      // margin-left: 17px;
      .rightTop {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .rightTopL {
          width: 305px;

          .right01 {
            margin-bottom: 15px;

            .right01Box {
              height: 180px;
            }
          }

          .right02 {
            margin-bottom: 15px;

            .right02Box {
              height: 193px;
              display: flex;
              align-items: center;
              justify-content: space-between;

              .div1 {
                width: 50%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                position: relative;

                .span1 {
                  color: #0d9ffe;
                  font-size: 36px;
                  font-weight: bold;
                }

                .span1::after {
                  content: '%';
                  font-size: 12px;
                  font-weight: normal;
                }

                .span2 {
                  font-size: 16px;
                  color: #fff;
                }
              }

              .div1:first-child::after {
                content: ' ';
                width: 1px;
                height: 24px;
                position: absolute;
                right: 0;
                top: 50%;
                margin-top: -12px;
                background-color: #0d9ffe;
              }

              .div1:last-child {
                .span1 {
                  color: #03df79;
                }
              }
            }
          }

          .right03 {
            margin-bottom: 15px;

            .right03Box {
              height: 192px;
              position: relative;
              display: flex;
              flex-direction: column;
              .selectBo {
                height: 40px;
              }
              .pieBox {
                flex: 1;
              }
            }
          }
        }

        .rightTopR {
          width: 305px;

          .right04 {
            margin-bottom: 15px;

            .right04Box {
              height: 180px;
            }
          }

          .right05 {
            margin-bottom: 15px;

            .right05Box {
              height: 193px;
              position: relative;
              display: flex;
              flex-direction: column;

              .selectBo {
                height: 40px;
              }

              .pieBox {
                flex: 1;
              }
            }
          }

          .right06 {
            margin-bottom: 15px;

            .right06Box {
              height: 192px;
              position: relative;
              display: flex;
              flex-direction: column;

              .selectBo {
                height: 40px;
              }

              .pieBox {
                flex: 1;
              }
            }
          }
        }
      }
    }

    // .right1 {
    //   width: 100%;
    //   .right1Box {
    //     width: 100%;
    //     height: 179px;
    //     box-sizing: border-box;
    //     padding: 14px 20px 12px 20px;
    //     display: flex;
    //     align-items: center;
    //     justify-content: space-between;
    // 		.right1block {
    // 			width: 49.5%;
    // 		}

    //     .tableBox {
    //       width: 426px;
    //       height: 140px;
    //       border: 1px solid #247aec;
    //       border-radius: 8px;
    //       box-sizing: border-box;
    //       padding: 20px 10px 0;

    //       .tableBoxHeader {
    //         display: flex;
    //         color: #13a2ff;
    //         font-size: 16px;

    //         div {
    //           width: 33%;
    //           // text-align: center;
    //         }
    //       }

    //       .hidden {
    //         overflow: hidden;
    //         width: 404px;

    //         .tableBoxbodayBox {
    //           max-height: 200px;
    //           overflow-y: scroll;
    //           width: 424px;

    //           .tableBoxboday {
    //             display: flex;
    //             color: #ffffff;
    //             font-size: 16px;
    //             margin-top: 13px;
    //             width: 404px;
    //             display: flex;
    //             align-items: center;

    //             div {
    //               width: 33%;
    //               // text-align: center;
    //             }
    //           }
    //         }
    //       }
    //     }
    //   }
    // }

    // .right2 {
    //   width: 100%;
    //   margin-top: 20px;

    //   .right2Box {
    //     width: 100%;
    //     height: 78px;
    //     display: flex;
    //     justify-content: space-around;
    //     align-items: center;

    //     .right2block {
    //       width: 193px;
    //       height: 46px;
    //       background: linear-gradient(
    //         270deg,
    //         #0d59f3 0%,
    //         rgba(13, 89, 243, 0) 0%,
    //         rgba(13, 89, 241, 0.41) 100%
    //       );
    //       color: #ffffff;
    //       display: flex;
    //       justify-content: space-around;
    //       align-items: center;
    //       border: 1px solid #0d57ed;

    //       span {
    //         &:first-child {
    //           font-size: 14px;
    //           font-family: MicrosoftYaHei;
    //           line-height: 19px;
    //         }

    //         &:last-child {
    //           font-size: 20px;
    //           font-family: BMDoHyeon-OTF, BMDoHyeon;
    //           font-weight: normal;
    //           color: #e3fe79;
    //           line-height: 25px;
    //         }
    //       }
    //     }
    //   }
    // }

    // .right3 {
    //   width: 100%;
    //   margin-top: 20px;

    //   .right3Box {
    //     width: 100%;
    //     height: 138px;
    //     padding-top: 24px;
    //     box-sizing: border-box;

    //     .right3block {
    //       margin: auto;
    //       width: 426px;
    //       height: 79px;
    //       border: 1px solid #247aec;
    //       border-radius: 8px;
    //       display: flex;
    //       justify-content: space-around;
    //       align-items: center;
    //       box-sizing: border-box;

    //       .right3content {
    //         display: flex;
    //         flex-direction: column;
    //         align-items: center;
    //         justify-content: space-between;
    //         color: #ffffff;
    //         width: 106px;

    //         div {
    //           font-size: 16px;
    //           font-family: MicrosoftYaHei;
    //           color: #13a2ff;
    //           line-height: 21px;
    //           margin-bottom: 7px;
    //         }

    //         span {
    //           font-size: 22px;
    //           font-family: PingFangSC-Regular, PingFang SC;
    //           font-weight: 400;
    //           color: #ffffff;
    //           line-height: 30px;
    //         }
    //       }
    //     }
    //   }
    // }

    // .right4 {
    //   width: 100%;
    //   margin-top: 20px;

    //   .right4Box {
    //     width: 100%;
    //     height: 306px;
    //     box-sizing: border-box;
    //     padding: 14px 20px 12px 20px;

    //     .tableBox {
    //       width: 426px;
    //       height: 280px;
    //       border: 1px solid #247aec;
    //       border-radius: 8px;
    //       box-sizing: border-box;
    //       padding: 20px 10px 0;

    //       .tableBoxHeader {
    //         display: flex;
    //         color: #13a2ff;
    //         font-size: 16px;

    //         div {
    //           width: 33%;
    //           // text-align: center;
    //         }
    //       }

    //       .hidden {
    //         overflow: hidden;
    //         width: 404px;

    //         .tableBoxbodayBox {
    //           max-height: 200px;
    //           overflow-y: scroll;
    //           width: 424px;

    //           .tableBoxboday {
    //             display: flex;
    //             color: #ffffff;
    //             font-size: 16px;
    //             margin-top: 13px;
    //             width: 404px;
    //             display: flex;
    //             align-items: center;

    //             div {
    //               width: 33%;
    //               // text-align: center;
    //             }
    //           }
    //         }
    //       }
    //     }
    //   }
    // }
  }
}
.alarmBox {
  display: flex;
  align-items: center;

  .alarmImg {
    width: 100px;
    height: 100px;
  }

  .alarmText {
    font-size: 30px;
    color: #f00;
    margin-bottom: 0;
  }
}
.zzc {
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #f00;
  opacity: 0;
  cursor: pointer;
}
